{extend name="base"/}

{block name="resources"}{/block}

{block name="main"}
<form class="layui-form ns-form">
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>配送员名称：</label>
        <div class="layui-input-block">
            <input name="clerk_name" type="text" placeholder="请输入配送员名称" maxlength="30" lay-verify="required" class="layui-input ns-len-long" autocomplete="off">
        </div>
        <div class="ns-word-aux">
            <p>配送员名称最长不超过30个字符</p>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">绑定会员：</label>
        <div class="layui-input-block">
            <div class="layui-input-inline">
                <input type="text" readonly name="username" autocomplete="off" class="layui-input ns-len-mid">
            </div>
            <input type="hidden" name="member_id">
            <button class="layui-btn ns-bg-color" type="button" onclick="chooseMember()">选择会员</button>
        </div>
        <div class="ns-word-aux">
            <p>绑定会员后配送员才能在手机上使用配送功能，绑定会员后不可修改</p>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>配送员手机：</label>
        <div class="layui-input-block">
            <input name="clerk_mobile" type="number" placeholder="请输入配送员手机" lay-verify="required|phone" class="layui-input ns-len-mid" autocomplete="off">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>配送员头像：</label>
        <div class="layui-input-block">
            <div class="upload-img-block">
                <div class="upload-img-box">
                    <div class="ns-upload-default" id="imgUpload">
                        <div class="upload">
                            <img src="SHOP_IMG/upload_img.png" data-id="imgUpload"/>
                            <p>点击上传</p>
                        </div>
                    </div>
                    <div class="operation" >
                        <div >
                            <i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
                            <i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
                        </div>
                        <div class="replace_img js-replace">点击替换</div>
                    </div>
                    <input type="hidden" name="clerk_headimg" lay-verify="required">
                </div>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">配送员备注：</label>
        <div class="layui-input-inline ns-len-long">
            <textarea name="clerk_remark" placeholder="请输入配送员备注" class="layui-textarea" maxlength="200"></textarea>
        </div>
    </div>

    <div class="ns-form-row">
        <button class="layui-btn ns-bg-color" lay-submit lay-filter="save">保存</button>
        <button type="reset" class="layui-btn layui-btn-primary" onclick="back()">返回</button>
    </div>
</form>

{/block}
{block name="script"}
<script>
    var uploadObj = new Upload({elem: '#imgUpload'});


    layui.use(['form'], function (form) {
        var is_submit = false;

        // 验证
        form.verify({

        });

        // 提交
        form.on('submit(save)', function (data) {

            if (is_submit) return false;
            is_submit = true;

            $.ajax({
                url: ns.url('shop/communitydelivery/addclerk'),
                data: data.field,
                dataType: 'json',
                type: 'post',
                success: function (data) {
                    if (data.code == 0) {
                        layer.confirm(data.message, {
                            title: '操作提示',
                            btn: ['返回列表', '继续添加'],
                            yes: function () {
                                back();
                            },
                            btn2: function () {
                                window.location.reload();
                            },
                            cancel: function () {
                                this.yes();
                            }
                        })
                    } else {
                        is_submit = false;
                        layer.msg(data.message);
                    }
                },
                error: function () {
                    is_submit = false;
                    layer.msg('操作异常');
                }
            });

            return false;
        });
    });

    /**
     * 返回
     */
    function back() {
        location.href = ns.url('shop/communitydelivery/clerklist')
    }

    /**
     * 选择会员
     */
    function chooseMember() {
        layer.open({
            title: '会员列表',
            id: 'bind_member_layer',
            type: 2,
            area: ['60%', '80%'],
            content: ns.url('shop/communitydelivery/chooseMember', {chooseCallback: 'chooseMemberCallback'}),
        });
    }

    /**
     * 选择会员回调
     * @param data
     */
    function chooseMemberCallback(data) {
        var default_img = 'SHOP_IMG/default_headimg.png';

        uploadObj.parent.find("input[type='hidden']").val(data.headimg ? data.headimg : default_img);
        uploadObj.parent.addClass('hover');
        uploadObj.parent.children('.ns-upload-default').html((function () {
            var html = '';
            html += '<div id="preview_imgUpload" class="preview_img">';
                html += '<img layer-src title="点击放大图片" src="'+ (data.headimg ? ns.img(data.headimg) : default_img) +'" onerror="this.src = \'' + default_img + '\'" class="img_prev">';
            html += '</div>';
            return html;
        })());

        $('input[name="member_id"]').val(data.member_id);
        $('input[name="username"]').val(data.username);
        $('input[name="clerk_mobile"]').val(data.mobile);
        loadImgMagnify();
    }

</script>
{/block}